<template>
	<view class="content">
		<view class="bg">
			<view class="status_bar" :style="'height:'+statusHeight + 'px'"></view>
			<uni-nav-bar backgroundColor="none" color="#FFFFFF" title="一键报修" border="false">
			</uni-nav-bar>
			<view class="list" style="margin-top: 10rpx;">
				<view class="title">
					报修人信息
				</view>
				<view class="item">
					<label class="" for="name">
						<image src="../../static/icon/name.png" class="icon"></image>
						姓名
					</label>
					<view style="width:28rpx;height: auto;">

					</view>
					<input id="name" v-model="name" placeholder="请输入姓名" />
				</view>
				<view class="item">
					<label class="" for="name">
						<image src="../../static/icon/phone.png" class="icon"></image>
						手机号
					</label>
					<input id="name" v-model="phone" placeholder="请输入手机号" />
				</view>
			</view>

		</view>



		<view class="list" style="margin-top: 10rpx;">
			<view class="title">
				报修信息
			</view>
			<view class="item" @click="timeShow">
				<label class="" for="name">
					<image src="../../static/icon/time.png" class="icon"></image>
					预约时间
				</label>
				<view style="flex: 1;height: 80rpx;">
				<uni-datetime-picker  type="datetime" v-model="ordertime" @change="changeLog" />
				</view>

			</view>
			<view class="item">
				<label>
					<image src="../../static/icon/quyu.png" class="icon"></image>
					报修区域
				</label>
				<view style="flex: 1;font-size: 28rpx;color: #666666; overflow: hidden;">
					<uni-data-picker :localdata="items" popup-title="请选择故障区域" @change="onchange"
						@nodeclick="onnodeclick">
					</uni-data-picker>
				</view>

			</view>
			<view class="item">
				<label class="" for="location">
					<image src="../../static/icon/location.png" class="icon"></image>
					详细地址
				</label>
				<input id="location" v-model="address" placeholder="请输入详细地址" />
			</view>
			<view class="item" >
				<label>
					<image src="../../static/icon/type.png" class="icon"></image>
					故障类型
				</label>
				<view style="flex: 1;font-size: 28rpx;color: #666666; overflow: hidden;">
					<uni-data-picker :localdata="typelist" popup-title="请选择故障类型" @change="typechange"
						@nodeclick="onnodeclick">
					</uni-data-picker>
				</view>
				
				
			</view>
			<view class="item">
				<label class="" for="name">
					<image src="../../static/icon/section.png" class="icon"></image>
					故障内容
				</label>
				<input id="location" v-model="content"  placeholder="请输入故障内容" />
			</view>

			<view class="photoitem">
				<view class="photo">
					<image src="../../static/icon/photo.png" class="icon"></image>
					故障照片
				</view>
				<view class="uploadBox">
					<image class="uploadimg" v-for="item in uploadList.array" :src="item" mode="aspectFill"></image>
					<image mode="aspectFill" src="../../static/icon/upload.png" class="uploadimg" @click="unloadImg"></image>
					<!-- <u-upload class="upload" :fileList="fileList.array" @afterRead="afterRead" @delete="deletePic"
			         :maxCount="3"></u-upload> -->
				</view>

			</view>

		</view>

		<view class="box" @click="sumbit">
			提交报修
		</view>
		<view style="height: 100rpx;width: 100%;">

		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import api from '../../api/api'
	let statusHeight = ref(null)
	onLoad((options) => {
		uni.getSystemInfo({
			success: function(res) {
				statusHeight.value = res.statusBarHeight
			}
		})
	})

	let name = ref(''),
		phone = ref(''),
		region = ref(''),
		address = ref(''),
		repairtype=ref(''),
		content=ref('')
		
	// 提交
	// 提交报修
	const sumbit = () => {
		if(uni.getStorageSync('info').identity!=='user'){
			uni.showToast({
				title:'管家、维修人员暂不支持提交报修',
				icon:'none',
				duration:1500
			})
			return
		}
		api.repairAdd({
			personId:uni.getStorageSync('info').personId,
			nickname:uni.getStorageSync('info').nickname,
			name: name.value,
			phone: phone.value,
			ordertime: ordertime.value,
			region: region.value,
			address: address.value,
			repairtype: repairtype.value,
			content: content.value,
			photos: uploadList.array,
			sumbittime:ordertime.value
			
		}).then(res => {
			if(res.status=200){
				uni.showToast({
					icon:'none',
					duration:1500,
					title:res.msg
				})
				setTimeout(function(){
					uni.switchTab({
						url:'/pages/index/index'
					})
				},1500)
			}

		})

	}
	
	// 预约时间
	let ordertime = ref('')

	// 故障类型
	const typelist = [{
			text: "水电",
			value: "1-0",
			children: [{
					text: "灯",
					value: "1-1",
					children: [{
							text: "卫生间灯坏",
							value: "1-1-1"
						},
						{
							text: "浴室灯坏",
							value: "1-1-2"
						},
						{
							text: "寝室灯坏",
							value: "1-1-3"
						},
						{
							text: "阳台灯坏",
							value: "1-1-4"
						},
						{
							text: "其他",
							value: "1-1-5"
						}
					]
				},
				{
					text: "水",
					value: "1-2",
					children: [{
							text: "洗衣台水龙头坏",
							value: "1-2-1"
						},
						{
							text: "洗衣机水龙头坏",
							value: "1-2-2"
						},
						{
							text: "浴室水龙头坏",
							value: "1-2-3"
						},
						{
							text: "其他",
							value: "1-2-4"
						}
					]
				},
				{
					text: "插座",
					value: "1-3",
					children: [{
							text: "床边插座坏",
							value: "1-3-1"
						},
						{
							text: "书桌插座坏",
							value: "1-3-2"
						},
						{
							text: "阳台插座坏",
							value: "1-3-3"
						},
						{
							text: "其他插座坏",
							value: "1-3-4"
						}
					]
				},
				{
					text: "空调",
					value: "1-3",
					children: [{
							text: "停机",
							value: "1-4-1"
						},
						{
							text: "不制冷",
							value: "1-4-2"
						},
						{
							text: "噪音大",
							value: "1-4-3"
						},
						{
							text: "脱落",
							value: "1-4-4"
						},
						{
							text: "其他",
							value: "1-4-5"
						}
					]
				},
				{
					text: "其他",
					value: "1-3",
				}
			]
		},
		{
			text: "家具",
			value: "2-0",
			children: [{
					text: "床",
					value: "2-1",
	
				},
				{
					text: "床下书桌",
					value: "2-2"
				},
				{
					text: "衣柜",
					value: "2-3"
				},
				{
					text: "椅子",
					value: "2-4"
				},
				{
					text: "其他",
					value: "2-5"
				}
			]
		},
		{
			text: "土建",
			value: "3-0",
			children: [{
					text: "门锁",
					value: "3-1",
			
				},
				{
					text: "门",
					value: "3-2"
				},
				{
					text: "天花",
					value: "3-3"
				},
				{
					text: "堵塞",
					value: "3-4"
				},
				{
					text: "其他",
					value: "3-5"
				}
			]
		},
	
	]
	// 类型选择
	const typechange=(e)=>{
		const array = e.detail.value
		array.forEach(item=>{
			repairtype.value+='/'+item.text
		})
		console.log(repairtype.value)
	}
	
	// 报修区域
	const onchange = (e) => {
		const array = e.detail.value
		array.forEach(item=>{
			region.value+='/'+item.text
		})
		console.log(region.value)
	}
	const items = [{
			text: "花都校区",
			value: "1-0",
			children: [{
					text: "花都教学区",
					value: "1-1",
					children: [{
							text: "图书馆",
							value: "1-1-1"
						},
						{
							text: "教学楼",
							value: "1-1-2"
						},
						{
							text: "实验楼",
							value: "1-1-3"
						},
						{
							text: "艺术楼",
							value: "1-1-4"
						},
						{
							text: "体育馆",
							value: "1-1-5"
						},
						{
							text: "实训楼",
							value: "1-1-6"
						}
					]
				},
				{
					text: "教职工生活区",
					value: "1-2",
					children: [{
							text: "教工宿舍A栋",
							value: "1-2-1"
						},
						{
							text: "教工宿舍A栋",
							value: "1-2-2"
						},
						{
							text: "教工宿舍A栋",
							value: "1-2-3"
						},
						{
							text: "教工宿舍A栋",
							value: "1-2-4"
						}
					]
				},
				{
					text: "学生生活区",
					value: "1-3",
					children: [{
							text: "1栋",
							value: "1-3-1"
						},
						{
							text: "2栋",
							value: "1-3-2"
						},
						{
							text: "3栋",
							value: "1-3-3"
						},
						{
							text: "4栋",
							value: "1-3-4"
						},
						{
							text: "食宿综合楼",
							value: "1-3-5"
						}
					]
				}
			]
		},
		{
			text: "海珠校区",
			value: "2-0",
			children: [{
					text: "进修学社第一栋",
					value: "2-1",

				},
				{
					text: "进修学社第二栋",
					value: "2-2"
				}
			]
		},

	]


    // 上传图片
	let uploadList=reactive({
		array:[]
	})
    const unloadImg=()=>{
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res) {
				uni.showLoading({
					title:'图片上传中'
				})
				uploadFilePromise(res.tempFilePaths[0]).then(res=>{
					console.log(res,888)
					uploadList.array.push(res)
					uni.hideLoading()
				})
			}
		});
	}	
	// 上传图片
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: 'http://localhost:3000/campus-repair/upload',
				filePath:url,
				name: 'file',
				formData: {
					user: 'test'
				},
				success: (res) => {
					resolve(res.data)
					uni.hideLoading()
				},
				fail(e) {
					console.log(e)
				}
			});
		})
		
	}
</script>

<style lang="scss">
	.content {
		.bg {
			background-image: url("");
			background-size: 100% 100%;

			.uni-navbar {
				.uni-navbar__content {
					border: 0 none !important;
				}
			}
		}




		.list {
			margin: 0 30rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
			margin-bottom: 30rpx;
			background-color: white;
			padding: 30rpx;
			border-radius: 16rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.item {
				label {
					padding-right: 30rpx;
					font-size: 28rpx;
					color: #666666;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						padding-right: 5rpx;
					}
				}


				input {
					flex: 1;
					font-size: 28rpx;
					color: #666666;
				}

				height: 100rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: #E6E6E6 1rpx solid;
			}

			.photoitem {
				.photo {
					line-height: 100rpx;
					padding-right: 30rpx;
					font-size: 28rpx;
					color: #666666;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						padding-right: 5rpx;
					}
				}

				.uploadBox {
					.uploadimg{
						width: 150rpx;
						height: 150rpx;
					}
					// overflow: hidden;
					// display: inline-block;
					// width: 100rpx;
					// height: 100rpx;
					// text-align: left;
					// .upload{
					// 	width: 100rpx;
					// 	height: 100rpx;
					// }
				}
			}

		}

		.box {
			margin: 10rpx 30rpx;
			background-color: #3B8AF4;
			color: white;
			font-size: 28rpx;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 16rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
		}
	}
</style>
